<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Multiple Language EBU Timed Text Sample</title>
    <meta name="description" content="" />

    <link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">
    <script src="../../contrib/akamai/controlbar/ControlBar.js"></script>
    <script src="../../dist/dash.all.debug.js"></script>
    <!--dash.all.min.js should be used in production over dash.all.debug.js
        Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
    <!--<script src="../../dist/dash.all.min.js"></script>-->


    <script class="code">
        /* TEST CONTENT.
         https://vm2.dashif.org/dash/vod/testpic_2s/multi_subs.mpd
         https://vm2.dashif.org/dash/vod/testpic_2s/stpp_two_regions_multi_color.mpd
         https://vm2.dashif.org/livesimg//testpic_2s/multi_subs.mpd
         https://vm2.dashif.org/livesimg//testpic_2s/stpp_two_regions_multi_color.mpd
        */
        var CAPTION_URL = "https://vm2.dashif.org/dash/vod/testpic_2s/multi_subs.mpd",
            videoElement,
            player;

        function startVideo() {
            var url = CAPTION_URL,
                TTMLRenderingDiv;

            videoElement = document.querySelector(".videoContainer video");
            TTMLRenderingDiv = document.querySelector("#ttml-rendering-div");

            player = dashjs.MediaPlayer().create();
            player.initialize(videoElement, url, true);
            player.attachTTMLRenderingDiv(TTMLRenderingDiv);
            controlbar = new ControlBar(player); // Checkout ControlBar.js for more info on how to target/add text tracks to UI
            controlbar.initialize();
        }

    </script>

    <style>
        video {
            width: 100%;
        }
        .dash-video-player {
            width: 640px;
        }
    </style>

    <body onload="startVideo()">
        <div class="dash-video-player code">
            <div class="videoContainer" id="videoContainer">
                <video preload="auto" autoplay="true" > </video>
                <div id="ttml-rendering-div"></div>

                <div id="videoController" class="video-controller unselectable">
                    <div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
                        <span id="iconPlayPause" class="icon-play"></span>
                    </div>
                    <span id="videoTime" class="time-display">00:00:00</span>
                    <div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
                        <span class="icon-fullscreen-enter"></span>
                    </div>
                    <div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
                        <span class="icon-bitrate"></span>
                    </div>
                    <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
                    <div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
                        <span id="iconMute" class="icon-mute-off"></span>
                    </div>
                    <div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks">
                        <span class="icon-tracks"></span>
                    </div>
                    <div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption">
                        <span class="icon-caption"></span>
                    </div>
                    <span id="videoDuration" class="duration-display">00:00:00</span>
                    <div class="seekContainer">
                        <div id="seekbar" class="seekbar seekbar-complete">
                            <div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
                            <div id="seekbar-play" class="seekbar seekbar-play"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="../highlighter.js"></script>
    </body>
</html>
